<template>
    <div class="info-bind-container">
        <PageHeader title="信息绑定" />
       <div class="form-container">
        <form class="info-bind-form" lay-filter="infoBindForm">
            <div class="form-item">
                <label for="dawn_zhjyUser" class="form-label">智慧账号</label>
                <InputField v-model="form.dawn_zhjyUser" id="dawn_zhjyUser" label="" placeholder="请输入用户名" required @blur="v$.dawn_zhjyUser.$touch()"
                    :error-message="v$.dawn_zhjyUser.$errors[0]?.$message"
                    :error="v$.dawn_zhjyUser.$errors[0]?.$message || false" />
            </div>
            <div class="form-item">
                <label for="dawn_zhjyPassword" class="form-label">智慧密码</label>
                <InputField v-model="form.dawn_zhjyPassword" id="dawn_zhjyPassword" label="" placeholder="请输入密码" required @blur="v$.dawn_zhjyPassword.$touch()"
                    :error-message="v$.dawn_zhjyPassword.$errors[0]?.$message"
                    :error="v$.dawn_zhjyPassword.$errors[0]?.$message || false" />
            </div>
            <div class="form-item">
                <label for="dawn_identity" class="form-label">身份</label>
                <lay-select v-model="form.dawn_identity" id="dawn_identity" placeholder="请选择" :allow-clear="true">
                    <lay-select-option v-for="identity in identitySelect" :value="identity.value" :label="identity.lable"></lay-select-option>
                </lay-select>
                <span class="error-message" v-if="v$.dawn_identity.$errors[0]?.$message">{{ v$.dawn_identity.$errors[0]?.$message }}</span>
            </div>
            <div class="form-item">
                <label for="dawn_classOlder" class="form-label">应届数</label>
                <lay-form-item label="" mode="inline" class="custom-lay-form-item">
                    <lay-date-picker type="year" v-model="form.dawn_classOlder" id="dawn_classOlder" placeholder="选择" allow-clear></lay-date-picker>
                </lay-form-item>
                <span class="error-message" v-if="v$.dawn_classOlder.$errors[0]?.$message">{{ v$.dawn_classOlder.$errors[0]?.$message }}</span>
            </div>
            <div class="form-item">
                <lay-space size="md">
                    <label class="form-label">激活状态</label>
                    <lay-tag :type="isZhjySucces? 'primary' : 'danger' ">{{isZhjySucces? '通过' : '未通过' }}</lay-tag>
                </lay-space>
            </div>
            <div class="form-item">
                <lay-button class="form-submit-btn" type="primary" :disabled="isZhjySucces"
                :loading="loadState" @click.prevent='handleSubmit'>{{ isZhjySucces? "信息已经绑定" : "绑定信息"}}</lay-button>
                
            </div>

            </form>
       </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { required, helpers } from '@vuelidate/validators'
import useVuelidate from '@vuelidate/core'
import request from '@/utils/request';
import apiUrls  from '@/config/apiUrls'; 
import {baseNotifyInfo} from '@/utils/utils.js';
import {StatusCodeEnum} from '@/enum/StatusCodeEnum.js';
import { router, Link  } from '@inertiajs/vue3';
import RouterPath from '@/constans/RouterPath.js'
import Constan from '@/constans/Constan.js';
import { usePage } from '@inertiajs/vue3';
import PageHeader from '@/Pages/compontents/PageHeader.vue';
/**
 * 已知缺陷
 * 1、 前台不允许继续绑定，但是使用后台接口可以访问，但是会绑定失败
 * 2、不允许修账号密码，后台也没有编写
 */
onMounted(() => {
    try {
        const page = usePage();
        const pageData = page.props.result.original.data
        form.dawn_zhjyUser = pageData['dawn_zhjyUser']
        form.dawn_zhjyPassword = pageData['dawn_zhjyPassword']
        form.dawn_identity = pageData['dawn_zhjyidEntity']
        form.dawn_classOlder = pageData['dawn_zhjyEnrollmentYear']
        isZhjySucces.value = true
    } catch (error) {

    }

    // getZhjyStatue()
})

const identitySelect = [
    { 'lable': "学生", 'value': "student" },
]

const form = reactive({
    dawn_zhjyUser: '',
    dawn_zhjyPassword: '',
    dawn_identity: '',
    dawn_classOlder: '',
});

const isZhjySucces = ref(false);
const loadState = ref(false);

const rules = {
    dawn_zhjyUser: {
        required: helpers.withMessage('智慧账号不能为空', required),
    },
    dawn_zhjyPassword: {
        required: helpers.withMessage('智慧密码不能为空', required),
    },
    dawn_identity: {
        required: helpers.withMessage('身份不能为空', required),
    },
    dawn_classOlder: {
        required: helpers.withMessage('应届数不能为空', (value) => value!== '' && value!== null && value!== undefined)
    }
};

const v$ = useVuelidate(rules, form);

// 处理表单数据
const handleSubmit = async () => {
    const isValid = await v$.value.$validate();
    if (!isValid) {
        console.log('提交登录失败:');
        return
    };
    
    loginUser()
};

const loginUser = async () => {
    loadState.value = true
    const response = await request.post(apiUrls.zhjy.zhjyLogin, form, {
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if( response.code === 200 ){
        baseNotifyInfo(StatusCodeEnum.zhjyLogin_success())
        isZhjySucces.value = true

      }else{
        console.log(response);
        
        baseNotifyInfo(StatusCodeEnum.myPop(response.message, 2))
        isZhjySucces.value = false
      }
      loadState.value = false
  };


</script>

<style scoped>
.info-bind-container {
    display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.back-button-container {
    margin-bottom: 15px;
    text-align: left;
}

.info-bind-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.form-item {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.InputField {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.InputField:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.error-message {
    color: #dc3545;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.form-submit-btn {
    width: 100%;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-submit-btn:hover {
    background-color: #0056b3;
}

.form-back-btn {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.form-back-btn:hover {
    background-color: #0056b3;
}

/* 自定义 lay-form-item 样式 */
.custom-lay-form-item {
    display: flex;
    align-items: center;
    gap: 10px; /* 调整标签和选择框之间的间距 */
}

/* 媒体查询，针对小屏幕尺寸调整样式 */
@media (max-width: 480px) {
   .info-bind-form {
        padding: 20px; /* 减小表单内边距 */
    }

   .form-label {
        font-size: 14px; /* 减小标签字体大小 */
    }

   .InputField {
        padding: 10px; /* 减小输入框内边距 */
        font-size: 12px; /* 减小输入框字体大小 */
    }

   .form-submit-btn {
        padding: 10px; /* 减小按钮内边距 */
        font-size: 14px; /* 减小按钮字体大小 */
    }

    /* 调整 lay-form-item 在小屏幕下的样式 */
   .custom-lay-form-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

   .custom-lay-form-item lay-date-picker {
        width: 100%;
    }
}

</style>